<template>
	<view>
		<cu-custom rightAll>
			电子回单
		</cu-custom>
		<view class="u-flex-y u-flex-between" :style="{height: minHeight}">
			<view class="main rela">
				<!-- <image class="abso bg" src="/static/e-receipt/wx_sharebg.png" mode="scaleToFill"></image> -->
				<view class="content rela"
					:style="{backgroundImage: `url(http://43.143.98.19:888/img/1.png)`}">
					<image class="seal abso" src="http://43.143.98.19:888/img/3.png" mode="aspectFit"></image>
					<view class="title-box u-flex ">
						<image class="checked margin-top-sm" src="http://43.143.98.19:888/img/2.png"
							mode="aspectFit">
						</image>
						<text class="title-text margin-left">
							交易已受理，请查\n询余额和交易明细
						</text>
					</view>
					<view class="real-text text-center">
						实际到账时间以收款方银行到账时间为准
					</view>
					<view class="infos margin-top-sm u-flex-y u-flex-items-center" v-if="infos">
						<view class="result-item u-flex u-flex-items-center u-flex-between w100">
							交易时间:
							<text>
								{{getDate(infos.createTime)}}
							</text>
						</view>
						<view class="result-item u-flex u-flex-items-center u-flex-between w100">
							收款人:
							<text>
								{{infos.receivingName}}
							</text>
						</view>
						<view class="result-item u-flex u-flex-items-center u-flex-between w100">
							收款账号:
							<text>
								{{formatCardNum(infos.oppositeAccount, '*********')}}
							</text>
						</view>
						<view class="result-item u-flex u-flex-items-center u-flex-between w100">
							转账金额:
							<text>
								{{priceFormat(infos.amountMoney)}}
							</text>
						</view>
						<view class="result-item u-flex u-flex-items-center u-flex-between w100">
							附言:
							<text>
								{{infos.postscript}}
							</text>
						</view>
						<view class="result-item u-flex u-flex-items-center u-flex-between w100">
							开户行:
							<text>
								{{_userinfo.network}}
							</text>
						</view>

						<view class="result-item u-flex u-flex-items-center u-flex-between w100">
							付款人:
							<text>
								{{_userinfo.holder}}
							</text>
						</view>
						<view class="result-item u-flex u-flex-items-center u-flex-between w100">
							付款账户:
							<text>
								{{hideCard? formatCardNum(infos.paymentAccount): infos.paymentAccount}}
							</text>
						</view>

					</view>
					<view class="tip text-center">
						此回单不作为收付款双方交易确认的最终依据
					</view>
					<image class="qrcode " src="http://43.143.98.19:888/img/4.png" mode="aspectFit"></image>
				</view>

				<!-- 截图区 -->
				<html2canvas ref="html2canvas" :domId="screenObj.domId" @renderFinish="renderFinish">

					<view id="canvasId" class="content content2 abso"
						:style="{backgroundImage: `url(http://43.143.98.19:888/img/1.png)`, '--dpi': dpi}">
						<image class="seal abso" src="http://43.143.98.19:888/img/3.png" mode="aspectFit"></image>
						<view class="title-box u-flex ">
							<image class="checked margin-top-sm" src="http://43.143.98.19:888/img/2.png"
								mode="aspectFit">
							</image>
							<text class="title-text margin-left">
								交易已受理，请查\n询余额和交易明细
							</text>
						</view>
						<view class="real-text text-center">
							实际到账时间以收款方银行到账时间为准
						</view>
						<view class="infos margin-top-sm u-flex-y u-flex-items-center" v-if="infos">
							<view class="result-item u-flex u-flex-items-center u-flex-between w100">
								交易时间:
								<text>
									{{getDate(infos.createTime)}}
								</text>
							</view>
							<view class="result-item u-flex u-flex-items-center u-flex-between w100">
								收款人:
								<text>
									{{infos.receivingName}}
								</text>
							</view>
							<view class="result-item u-flex u-flex-items-center u-flex-between w100">
								收款账号:
								<text>
									{{formatCardNum(infos.oppositeAccount, '*********')}}
								</text>
							</view>
							<view class="result-item u-flex u-flex-items-center u-flex-between w100">
								转账金额:
								<text>
									{{priceFormat(infos.amountMoney)}}
								</text>
							</view>
							<view class="result-item u-flex u-flex-items-center u-flex-between w100">
								附言:
								<text>
									{{infos.postscript}}
								</text>
							</view>
							<view class="result-item u-flex u-flex-items-center u-flex-between w100">
								开户行:
								<text>
									{{_userinfo.network}}
								</text>
							</view>

							<view class="result-item u-flex u-flex-items-center u-flex-between w100">
								付款人:
								<text>
									{{_userinfo.holder}}
								</text>
							</view>
							<view class="result-item u-flex u-flex-items-center u-flex-between w100">
								付款账户:
								<text>
									{{hideCard? formatCardNum(infos.paymentAccount): infos.paymentAccount}}
								</text>
							</view>

						</view>
						<view class="tip text-center">
							此回单不作为收付款双方交易确认的最终依据
						</view>
						<image class="qrcode " src="http://43.143.98.19:888/img/4.png" mode="aspectFit"></image>
					</view>

				</html2canvas>
				<view class="hide-card bgcolor-ffffff padding-sm
				  u-flex u-flex-between u-flex-items-center">
					隐藏账户
					<u-switch
						space="0" v-model="hideCard" :activeColor="themeColor"
						inactiveColor="rgb(230, 230, 230)">
					</u-switch>
				</view>
			</view>

			<view class="bottom rela">
				<scroll-view scroll-x class="ad-box">
					<view class="u-flex">
						<view class="ad-item rela" v-for="(item,index) in adList" :key="index"
							:style="{backgroundImage: `url(/static/e-receipt/${item.img})`}">
							<view class="title abso">
								{{item.title}}
							</view>
						</view>
					</view>
				</scroll-view>
				<view class="buttons u-flex u-flex-between u-flex-items-center">
					<view class="text-center btn" @click="jieping">
						保存
					</view>
					<view class="text-center btn">
						分享
					</view>
				</view>
			</view>
		</view>
		<!-- <image class="abso canvasimg" :src="screenObj.filePath" mode="aspectFit"></image> -->
	</view>
</template>

<script>
	import { PAY_METHODS } from '@/common/data/Enum.js';
	import { savePicture } from '@/common/sdk/5plus.js';
	export default {
		data() {
			return {
				infos: null,
				payMethods: PAY_METHODS,
				themeColor: '',
				hideCard: true,
				minHeight: '',
				adList: [
				{
					title: '电子回单',
					img: '1.png'
				},
				{
					title: '浪漫爱情',
					img: 'ad_1.jpg'
				},
				{
					title: '生日快乐',
					img: 'ad_2.jpg'
				},
				{
					title: '美好祝福',
					img: 'ad_3.jpg'
				},
				{
					title: '喜得贵子',
					img: 'ad_4.jpg'
				},
				{
					title: '学业有成',
					img: 'ad_5.jpg'
				}],
				screenObj: {
					domId: '',
					filePath: ''
				},
				dpi: 1,
			};
		},
		async onLoad() {
			this.$Tips.loading('请稍后...');
			try {
				const res = await this.$api.getBankFlowingwaterOne({
					id: this.$store.state.params.id
				});
				this.infos = res.data.data;
			} catch (e) {
				//TODO handle the exception
				console.debug('onLoad err', e);
			} finally {
				this.$Tips.loaded();
			}
		},
		onReady() {
			this.themeColor = this.$ThemeColor;
			this.minHeight = this.$windowHeight - this.$StatusBarHeight - this.$NavBarHeight + 'px';
			this.dpi = this.$dpi;
		},
		methods: {
			getDate(date) {
				return this.$u.date(new Date(date).getTime(), 'yyyy/mm/dd hh:MM');
			},
			jieping() {
				this.screenObj.domId = '#canvasId';
				console.debug(this.screenObj);
			},
			renderFinish(fileParams) {
				console.debug(fileParams);
				// #ifdef APP-PLUS
				uni.compressImage({
					src: fileParams.src,
					quality: 50,
					success: res => {
						this.screenObj.filePath = res.tempFilePath;
						savePicture(this.screenObj.filePath);
					},
					fail: e => {
						this.$Tips.toast('图片生成失败，请重试');
						console.debug('图片压缩失败');
					}
				});
				// #endif
				// #ifdef H5
				this.screenObj.filePath = fileParams.src;
				// #endif
				this.screenObj.domId = '';
			},
		}
	};
</script>

<style lang="scss" scoped>
	$fontColor: rgb(88, 88, 88);

	.main {
		margin-top: 30rpx;
		// padding: 0 48rpx;

		.bg {
			width: 660rpx;
			height: 920rpx;
			left: 50%;
			transform: translate3d(-50%, 0, 0);
			will-change: transform;
		}



		.content {
			padding: 0 48rpx;
			// background: url(/static/e-receipt/wx_sharebg.png) no-repeat;
			background-repeat: no-repeat;
			background-position: center;
			background-size: calc(100vw - 96rpx) 100%;
			padding-bottom: 10rpx;

			&.content2 {
				top: -9999px;
				left: -9999px;
				width: 200%;
				padding: 0 96rpx;
				background-size: calc(200vw - 192rpx) 100%;
				padding-bottom: 20rpx;

				.seal {
					width: 331rpx;
					height: 331rpx;
				}

				.title-box {
					padding: 40rpx 0;
					margin-left: 240rpx;

					.checked {
						width: 120rpx;
						height: 96rpx;
					}

					.title-text {
						font-weight: 1000;
						font-size: 76rpx;
					}
				}



				.real-text {
					// margin-left: 60rpx;
					font-size: 56rpx;
				}

				.infos {
					padding: 0 60rpx;
					font-size: 64rpx;
				}

				.tip {
					font-size: 52rpx;
					padding: 12rpx 0;
				}

				.qrcode {
					height: 260rpx;
					margin: 32rpx auto 0;
				}
			}

			.seal {
				width: 165rpx;
				height: 165rpx;
				// right: -46rpx;
				right: 0;
				z-index: 2;
			}

			.title-box {
				padding: 20rpx 0;
				margin-left: 120rpx;

				.checked {
					width: 60rpx;
					height: 48rpx;
					flex-shrink: 0;
				}

				.title-text {
					font-weight: 1000;
					font-size: 38rpx;
					color: rgb(0, 155, 0);
				}
			}

			.real-text {
				// margin-left: 60rpx;
				font-size: 28rpx;
				color: $fontColor;
			}

			.infos {
				padding: 0 30rpx;
				color: $fontColor;
				font-size: 32rpx;
				line-height: 2;
			}

			.tip {
				background-color: rgb(237, 237, 237);
				font-size: 26rpx;
				color: rgb(208, 17, 21);
				padding: 6rpx 0;
			}

			.qrcode {
				width: 100%;
				height: 130rpx;
				margin: 16rpx auto 0;
			}
		}



		.hide-card {
			margin: 40rpx 48rpx 0;
			border-radius: 12rpx;
			font-size: 28rpx;
			color: $fontColor;
		}
	}

	.bottom {
		margin-top: 10rpx;

		.ad-box {
			padding: 0 10rpx;

			.ad-item {
				width: 220rpx;
				height: 220rpx;
				background-size: 100% auto;
				margin-right: 20rpx;
				flex-shrink: 0;
				border-radius: 8rpx;

				.title {
					bottom: 0;
					width: 100%;
					background-color: rgba(162, 162, 162, 0.8);
					color: #fff;
					text-align: center;
					letter-spacing: 1px;
					font-size: 38rpx;
				}
			}
		}

		.buttons {
			margin: 40rpx 30rpx 50rpx;

			.btn {
				color: #fff;
				@include themeBgColor;
				font-size: 36rpx;
				padding: 10rpx 0;
				width: 49%;
				border-radius: 12rpx;
			}
		}
	}
</style>
